<template>
<view class="container loginway">
		<view class="head-box">
			<image src="/static/icon/logo.jpg"></image>
			<text>登录 喵小朋 获取更多精彩内容</text>
		</view>
		<view class="button-box">
			
			<!-- 勾选同意协议 -->
			<button v-show="agree" hover-class="none" class="button highlight" :plain="true" :loading="loginLoading"
				open-type="agreePrivacyAuthorization" @agreeprivacyauthorization="handleAgreePrivacyAuthorization"
			>
				<text>微信授权登录</text>
			</button>
			
			<!-- 未勾选同意协议 -->
			<button v-show="!agree" hover-class="none" class="button highlight" :plain="true" @click="agreeToast">
				<text>微信授权登录</text>
			</button>
			<!-- 同意协议区域 -->
			<view class="agree-box" @click="agree=!agree">
				<view class="check-box">
					<image v-if="agree" src="../static/icon_danxuan_light.png"></image>
					<image v-else src="../static/icon_danxuan.png"></image>
				</view>
				<view>
					<text>我已阅读并同意</text>
					<text class="highlight" @click.stop="goPrivacyContract()">{{ privacyContractName }}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { mapState,mapMutations } from "vuex"
	export default {
		data() {
			return {
				loginLoading: '',  // 登录进行状态
				agree: false,  // 同意协议
				privacyContractName: '', // 隐私协议名称
			};
		},
		onLoad() {
			// 进入登录页先保存取消登录在缓存里
			uni.setStorageSync('cancelLogin', true)
			
			// 获取隐私设置
			wx.getPrivacySetting({
				success: res => {
					console.log('wx.getPrivacySetting', res)
					this.privacyContractName = res.privacyContractName
				}
			})
		},
		onUnload() {
			// if (uni.getStorageSync('cancelLogin')) {
			// 	// 获取所有页面栈实例列表
			// 	let pages = getCurrentPages()
			// 	// 上一页页面实例
			// 	let prevPage = pages[ pages.length - 2 ]
			// 	// 修改上一页data里面的参数值
			// 	prevPage.$vm.backPage = true
			// }
		},
		methods: {
			...mapMutations('m_user', ['updateLogin', 'updateAgreePrivacy']),
			
			// 未勾选同意协议的提示
			agreeToast() {
				return uni.showToast({
					icon: 'none',
					title: '未勾选同意协议！'
				})
			},
			
			// 打开隐私协议
			goPrivacyContract() {
				wx.openPrivacyContract({
				  success: () => {}, // 打开成功
				  fail: () => {}, // 打开失败
				  complete: () => {}
				})
			},
			
			handleAgreePrivacyAuthorization(value) {
				// 用户同意隐私协议事件回调
				// 用户点击了同意，之后所有已声明过的隐私接口和组件都可以调用了
				// wx.getUserProfile()
				// wx.chooseMedia()
				// wx.getClipboardData()
				// wx.startRecord()
				console.log('用户同意隐私协议事件回调')
				// this.updateAgreePrivacy(value)
				wx.getPrivacySetting({
					success: res => {
						console.log('wx.getPrivacySetting', res)
					}
				})
				// wx登录
				// 调用登录方法
				this.wxLogin()
			},
			
			// 微信授权登录的方法
			wxLogin() {
				uni.login({
					provider: 'weixin',
					success: (res) => {
						console.log('wxlogin success:', res)
						this.$api.WXLogin({
							code: res.code
						}).then(res => {
							console.log('apilogin success', res)
							// 登录成功
							if (res.data.code == 200) {
								// 处理参数
								let params = {
									userId: res.data.data.id,
									token: res.data.data.token,
									nickName: res.data.data.nickName,
									avatar: res.data.data.icon?res.data.data.icon:'',
									phone: res.data.data.phone?res.data.data.phone:'',
									isAuthent: res.data.data.isAuthent,
									userType: res.data.data.type
								}
								// // 将当前用户名字和头像存储到本地
								this.updateLogin(params)
								// 获取所有页面栈实例列表
								let pages = getCurrentPages()
								console.log('pages', pages)
								// 上一页页面实例
								let prevPage = pages[ pages.length - 2 ]
								if (prevPage==undefined || !prevPage.route) {
									uni.switchTab({
										url: '/pages/index/index'
									})
								}
							}
						}).catch(err => {
							console.log('apilogin fail', err)
						})
					},
					fail: (err) => {
						console.log('wxlogin fail:', err)
					},
					complete: () => {
						this.loginLoading = false
					}
				})
			},
			
		},
	}
</script>

<style lang="scss">
.container {
		position: relative;
		background-color: #ffffff;
		font-family: PingFang SC;
		font-weight: 500;
		box-sizing: border-box;
		width: 100vw;
		height: 100vh;
		padding: 48rpx 0;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		
		&.loginway {
			justify-content: flex-start;
			
			.head-box {
				margin-top: 100rpx;
				margin-bottom: 84rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				image {
					width: 256rpx;
					height: 256rpx;
					margin-bottom: 20rpx;
				}
				text {
					font-size: 32rpx;
					font-weight: bold;
				}
			}
			
			.button-box {
				display: flex;
				flex-direction: column;
				align-items: center;
				.button {
					margin-top: 18rpx;
					width: 600rpx;
					height: 84rpx;
					background: #ffffff;
					display: flex;
					justify-content: center;
					align-items: center;
					text {
						font-size: 28rpx;
						line-height: 28rpx;
					}
					&.highlight {
						background: $uni-color-primary;
						border-color: #11a298;
						image {
							width: 32rpx;
							height: 32rpx;
							margin-right: 8rpx;
						}
						text {
							color: #ffffff;
						}
					}
				}
				.agree-box {
					margin-top: 20rpx;
					width: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					.check-box {
						position: relative;
						display: flex;
						image {
							width: 30rpx;
							height: 30rpx;
							padding: 16rpx;
							box-sizing: content-box;
						}
					}
					text {
						font-size: 28rpx;
						line-height: 62rpx;
						color: #333333;
						&.highlight {
							color: $uni-color-primary;
						}
					}
				}
			}
		}
	}
</style>
